<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图START -->
    <div class="block">
      <el-carousel height="460px" direction="vertical" :autoplay="false">
        <el-carousel-item v-for="item in carousel" :key="item.pid">
          <div>
            <h1 class="medium">{{ item.des }}</h1>
          </div>
          <img style="height: 460px; width:100%" :src="item.imgPath" :alt="item.des" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <!-- 景区展示START -->
    <div class="main-box">
      <div class="main">
        <!-- 热门景点展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">热门目的地</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img src="@/assets/imgs/appliance/phone.png" />
              </router-link>
            </div>
            <div class="list">
              <MyList :list="phoneList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 热门景点展示区域END -->

        <!-- 热门玩法 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">热门玩法</div>
            <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg">
                <span slot="1">推荐</span>
                <span slot="2">热门</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img src="@/assets/imgs/appliance/appliance-promo1.png" />
                </li>
                <li>
                  <img src="@/assets/imgs/appliance/appliance-promo2.png" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="applianceList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 热门玩法END -->

        <!-- <div class="block">
          <el-carousel height="200px" direction="vertical" :autoplay="false">
            <el-carousel-item v-for="item in carousel" :key="item.pid">
              <img style="height: 200px" :src="item.imgPath" :alt="item.des" />
            </el-carousel-item>
          </el-carousel>
        </div> -->

        <!-- 出行攻略 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">出行攻略</div>
            <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg2">
                <span slot="1">攻略</span>
                <span slot="2">美食</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd" style="height:695px">
            <div class="promo-list">
              <router-link to>
                <img src="@/assets/imgs/appliance/gl-pic1.png" />
              </router-link>
            </div>
            <div class="list">
              <MyGl :list="accessoryList" :isMore="true"></MyGl>
            </div>
          </div>
        </div>
        <!-- 出行攻略END -->
      </div>
    </div>
    <!-- 景区展示END -->
  </div>
</template>
<script>
import MyList from "@/components/MyList.vue";
import MyGl from "@/components/MyGl.vue";
import MyMenu from "@/components/MyMenu.vue";
export default {
  components: { MyList, MyMenu, MyGl },
  name: "IndexPage",
  data() {
    return {
      carousel: "", // 轮播图数据
      phoneList: "", // 热门目的地列表
      miTvList: "", // 电视景点列表
      applianceList: "", // 家电景点列表
      applianceHotList: "", //热门家电景点列表
      accessoryList: "", //配件景点列表
      accessoryHotList: "", //热门配件景点列表
      protectingShellList: "", // 保护套景点列表
      chargerList: "", //充电器景点列表
      applianceActive: 1, // 家电当前选中的景点分类
    };
  },
  mounted() {
    this._getCarousel_();
    // 获取各类景点数据
    this.getPromo("手机", "phoneList");
    this.getPromo("数码", "miTvList");
    this.getPromo("美食", "protectingShellList");
    this.getPromo("鞋靴", "chargerList");

    // 获取热门景点
    this.getPromo(
      ["'推荐'", "'热门'"],
      "applianceList",
      "/cat/goodinfo/getHotProduct"
    );
    this.getPromo(
      ["'攻略'", "'美食'"],
      "accessoryList",
      "/cat/goodinfo/getHotGl"
    );
  },
  methods: {
    _getCarousel_() {
      console.log("init _getCarousel_");
      this.$axios
        .post("/cat/goodcarouse/carousel")
        .then((res) => {
          this.carousel = res.data.data.carousel;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    // 获取玩法模块子组件传过来的数据
    getChildMsg(val) {
      this.applianceActive = val;
    },

    // 获取攻略模块子组件传过来的数据
    getChildMsg2(val) {
      this.accessoryActive = val;
    },

    // 获取各类景点数据方法封装
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : "/cat/goodinfo/getProductByCategory";
      this.$axios
        .post(api, {
          categoryName,
          limit: "6",
        })
        .then((res) => {
          // console.log(
          //   "获取各类景点数据方法封装",
          //   JSON.stringify(res.data.data.Product)
          // );
          this[val] = res.data.data.Product;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
  watch: {
    // 家电当前选中的景点分类，响应不同的景点数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电景点列表)直接赋值给applianceList(家电景点列表)
      // 所以在切换景点列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门景点
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视景点
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件景点列表)直接赋值给accessoryList(配件景点列表)
      // 所以在切换景点列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门景点
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套景点
        this.accessoryList = this.protectingShellList;
        return;
      }
    },
  },
};
</script>


<style scoped>
@import "../assets/css/index.css";

/* 轮播图文字START */
.el-carousel__item div {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  text-align: center;
  width: 100%;
  color: #ffffff;
  font-size: 28px;
  opacity: 0.9;
  /* line-height: 200px; */
  position: absolute;
  top: 68%;
}
/* 轮播图文字END */
</style>
